<template>
  <div class="draggable-notice-props">
    <a-card :bordered="false">
      <a-form :form="form" :label-col="{span: 8}" :wrapper-col="{span: 16}">
        <a-row :gutter="12">
          <a-col :md="24" :sm="24">
            <a-form-item label="公告内容" :colon="true">
              <a-input
                placeholder="公告内容"
                v-decorator="['msg', { rules: [{ required: true, message: '输入公告内容！', trigger: 'blur' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="24" :sm="24">
            <color-selection label="背景颜色" v-bind:color.sync="bgColor" key="bg-color" />
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="24" :sm="24">
            <color-selection label="文本颜色" v-bind:color.sync="tColor" key="text-color" />
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
  import { ColorSelection } from './other'
  export default {
    name: 'DraggableNoticeProps',
    components: {
      ColorSelection
    },
    props: {
      msg: {
        type: String,
        default: ''
      },
      backgroundColor: {
        type: String,
        required: true
      },
      textColor: {
        type: String,
        required: true
      }
    },
    data () {
      const { fieldsChange } = this
      return {
        form: this.$form.createForm(this, { name: 'draggable-notice', onFieldsChange: fieldsChange }),
        bgColor: this.backgroundColor,
        tColor: this.textColor
      }
    },
    methods: {
      fieldsChange (props, fields) {
        for (const key in fields) {
          if (!fields[key].validating) {
            this.$emit('update:msg', fields[key].value)
          }
          this.$emit('error', fields[key].errors)
        }
      },
      init () {
        const { msg, form } = this
        form.setFieldsValue({
          msg
        })
        this.$nextTick(() => {
          form.validateFields(['msg'])
        })
      }
    },
    mounted () {
      this.init()
    },
    watch: {
      bgColor (val) {
        if (val !== this.backgroundColor) {
          this.$emit('update:backgroundColor', val)
        }
      },
      tColor (val) {
        if (val !== this.textColor) {
          this.$emit('update:textColor', val)
        }
      }
    }
  }
</script>

<style lang="less">
  .ant-form-item {
    margin-bottom: 0;
  }
</style>
